<template>
<van-tabbar v-model="active" active-color="#d64532" inactive-color="#000">
    <van-tabbar-item icon="home-o" @click="toMall">首页</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" :badge="num" @click="toCar">购物车</van-tabbar-item>
    <van-tabbar-item icon="friends-o" @click="toMy">个人中心</van-tabbar-item>
</van-tabbar>
</template>

<script>
import Vue from 'vue'
import { getCar } from '@/utils/auth'
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar).use(TabbarItem)
export default {
  name: 'JmFooter',
  data() {
      return {
          active: 0,
          num:'',
      }
  },
  methods: {
      toMall() {
          this.$router.push({path: '/'})
      },
      toCar() {
          this.$router.push({path: '/shopcar'})
      },
      toMy() {
          this.$router.push({path: '/person'})
      },
      activeChange(e) {
          this.active = e
      },
      getCar(){
          let goods = getCar()
          if (goods && goods !== 'false') {
            goods = JSON.parse(goods)
          } else {
            goods = {}
          }
          let arr = Object.keys(goods)
          if(arr.length > 0){
              this.num = arr.length
          }else{
              this.num = ''
          }
      }
  },
  mounted() {
      this.getCar()
      this.$nextTick(() => {
        this.$emit('eventGetFootHeight', this.$el.offsetHeight)
      })
  }
}
</script>

<style lang="stylus" scoped>
    .footer_content
        width 100%
        height 1rem
        padding .1rem 0
        background #ffffff
        border-top 1px solid #eeeeee
        position fixed
        left 0
        bottom 0
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        div
            flex 1
            -webkit-flex 1
            overflow hidden
            text-align center
            .iconfont
                font-size .46rem
                color #000
            p
                width 100%
                margin-top .1rem
                font-size .24rem
                color #000

</style>
